<!DOCTYPE html>
<html lang="zh-hans">
<head>
  <meta charset="UTF-8">
  <title>待办事项</title>
  <link rel="stylesheet" href="/css/todo.css">
</head>
<body>
  <section class="container">

    <div class="heading">
      <img class="heading-img" src="/img/girl.svg">
      <h1 class="heading-title">To Do List</h1>
    </div>

    <form class="form" >
      <div>
        <label class="form-label" for="todo">~ Today I want to do ~</label>
        <input class="form-input" type="text" id="todo" name="todo" size="30">
        <button class="button"><span>Submit</span></button>
      </div>
    </form>
    
    <div>
      <ol class="todo-list" th:remove="all-but-first">
        <li th:each="todo : ${todoList}" th:text="${todo.todo}" th:class="${todo.done} ? 'done' : ''">Go to shop</li>
        <li class="done">Go to school</li>
        <li>Watch movie</li>
        <li>Play game</li>
      </ol>
    </div>
  </section>
</body>
</html>